﻿var innerHTML = "<li id='#{id}'>" +
                        "<h5>#{name}</h5>" +
                        "<a class='address'>#{place}</a>" +
                        "<span class='function' datalat='#{lat}' datalong='#{lng}'>" +
                                "<a href='javascript:void(0)' class='viewmap'>Xem</a>" +
                                "<a href='javascript:void(0)' class='setstartpoint'>Điểm đi</a>" +
                                "<a href='javascript:void(0)' class='setendpoint'>Điểm đến</a>" +
                                "<a href='javascript:void(0)' class='findplacearound'>Xung quanh</a>" +
                        "</span>" +
                     "</li>";

var infoHTML = "<div class='info_place'>" +
                        "<ul id='info_replace' class='street-content'>" +
                            "<li>" +
                                "<h5>#{name}</h5>" +
                                "<a class='address'>#{place}</a>" +
                                "<span class='function' datalat='#{lat}' datalong='#{lng}'>" +
                                        "<a href='#' class='viewmap'>Xem</a>" +
                                        "<a href='#' class='setstartpoint'>Điểm đi</a>" +
                                        "<a href='#' class='setendpoint'>Điểm đến</a>" +
                                        "<a href='#' class='findplacearound'>Xung quanh</a>" +
                                "</span>" +
                             "</li>" +
                        "</ul>" +
                    "</div>";

function AjaxSearch(param, type) {
    var count = 0;
    var request;
    if (type == 0)
        request = "http://localhost:53220/api/search?name=" + param + "&lat=" + coordsCenter.lat() + "&lng=" + coordsCenter.lng() + "&radius=20000";
    else {
        request = "http://localhost:53220/api/search?lat=" + param.lat() + "&lng=" + param.lng() + "&type=" + $('#lst_placetype :selected').val() + "&radius=" + $('#num_range :selected').val();
    }
    $.getJSON(request, function (data) {
        if (data != null) {
            var results = data.results;
            $.each(results, function (key, val) {
                var html = innerHTML.replace(/#\{id\}/g, count).replace(/#\{name\}/g, val.name)
                                    .replace(/#\{lat\}/g, val.geometry.location.lat).replace(/#\{lng\}/g, val.geometry.location.lng)
                if (type == 0)
                    html = html.replace(/#\{place\}/g, val.formatted_address);
                else
                    html = html.replace(/#\{place\}/g, val.vicinity);
                $('#results').append(html);

                var position = new google.maps.LatLng(val.geometry.location.lat, val.geometry.location.lng);

                markerPlace.push(new google.maps.Marker({
                    position: position,
                    icon: yellowMarker,
                    shadow: shadowMarker,
                    map: map,
                    draggable: true,
                    title: val.name
                }));

                var info = infoHTML.replace(/#\{name\}/g, val.name)
                            .replace(/#\{lat\}/g, val.geometry.location.lat).replace(/#\{lng\}/g, val.geometry.location.lng);
                if (type == 0)
                    info = info.replace(/#\{place\}/g, val.formatted_address);
                else
                    info = info.replace(/#\{place\}/g, val.vicinity);

                infoPlace.push(info);
                google.maps.event.addListener(markerPlace[count], 'mouseover', function () {
                    infoWindow.setContent(info);
                    infoWindow.open(map, this);
                });

                count++;
            });
            //$('#place-search-form').hide();
        }
    });
}


$(document).ready(function () {
    $('#search').click(function () {
        var keyword = $('#keyword').val();
        $('#results').empty();
        for (var i = 0; i < markerPlace.length; i++)
        markerPlace[i].setMap(null);
        markerPlace = [];
        AjaxSearch(keyword, 0);
    });

    $('.findplacearound').live("click", function () {
        infoWindow.close();
        var location = new google.maps.LatLng($(this).parent().attr('dataLat'), $(this).parent().attr('datalong'));
        $('#results').empty();
        for (var i = 0; i < markerPlace.length; i++)
            markerPlace[i].setMap(null);
        markerPlace = [];
        AjaxSearch(location, 1);
    });
});